<template>
	<div class="flex" style="border-left: 1px #eaeaea solid; border-bottom: 1px #eaeaea solid; border-right: 1px #eaeaea solid;">

    <div class="zuobian" style="width: 380px; height: calc(100vh - 105px); border-right:1px #eaeaea solid; overflow: auto; position: relative;">
     <div style="height: 50%; overflow: auto; border-bottom: 5px rgb(234, 234, 234) solid; padding: 20px;">

        <el-tree  class="filter-tree" @node-click="handleNodeClick" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
      <div style="position: absolute; left: 0; bottom: 0; background: #fff; width: 100%; height: calc(50% - 10px); overflow: auto;">
        <div>
          <el-table  ref="multipleTable"  :data="tableData"  tooltip-effect="dark"  style="width: 100%"  @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="time" label="采样时间"></el-table-column>
              <el-table-column prop="cyl" label="采样值"></el-table-column>
              <el-table-column prop="stationsNo" label="仪器序列号"></el-table-column>
              <el-table-column prop="beizhu" label="备注"></el-table-column>
            </el-table>
        </div>
      </div>
    </div>

    <div class="youbian" style="padding: 20px; width: calc(100vw - 680px);">
      <div>
        <el-button type="primary" @click='yunxingzhuansushow'>瀑布图分析设置</el-button>
      </div>

      <div id="mainc" style="width: 1000px; height: 500px;"></div>
    </div>



    <el-dialog title="瀑布图分析设置" center :visible.sync="yunxingzhuansulog" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <div>选中数据共有{{this.testarr2.length}}个</div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">段数据长度</div>
        <div><el-input v-model="yunxingzhuansuall.shu" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">间隔时间</div>
        <div><el-input v-model="yunxingzhuansuall.shijian" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="shiyuzhibiaolog = false">取消</el-button>
        <el-button type="primary" @click="qie">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import testarr from '@/common/testarr'
  import * as echarts from 'echarts';

  import { gettree,gettreecedian,gettreeshebei } from '@/api/xitong'

  import { getanalysis,postanalysis } from '@/api/shujuchakan'
	export default {
		name: 'left',
		data() {
			return {
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        yunxingzhuansulog:false,
        yunxingzhuansulog2:false,
        yunxingzhuansulog3:false,
        yunxingzhuansuall:{
          shu:0,
          shijian:0
        },

        tableData:[],


        menuVisible: false,

        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[],

        myChart:"",
        testarrx:[],
        testarry:[],
        testtitle:[],

        testarr2:[],

        zhexiantushuju:[],

			}
		},
		created() {

      this.getlist()
		},
		mounted() {
      this.shengchengtu()
		},
		methods: {

      qie:function(){
        if(this.yunxingzhuansuall.shu){
          let f = parseInt(this.testarr2.length / this.yunxingzhuansuall.shu)

          for(let i = 0; i <= this.yunxingzhuansuall.shu; i++){
            this.testarrx.push(i)
          }

          for(let i = 0; i <= f; i++){
            this.testtitle.push("第几段" + i)
            let arr = this.testarr2.slice(i * this.yunxingzhuansuall.shu, this.yunxingzhuansuall.shu * (i + 1))

            this.testarry.push({
              name: "第几段" + i,
              type: 'line',
              stack: 'Total',
              data: arr
            })
          }
          this.myChart.clear()
          this.yunxingzhuansulog = false
          this.shengchengtu()
        }
      },

      yunxingzhuansushow:function(){
        this.yunxingzhuansulog = true
      },
      yunxingzhuansushow2:function(){
        this.yunxingzhuansulog2 = true
      },
      yunxingzhuansushow3:function(){
        this.yunxingzhuansulog3 = true
      },
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },


      shengchengtu:function(){
        this.option = {
          title: {
            text: '测点图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.testtitle
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value',

          },
          series: this.testarry
        };

        if(this.myChart){
          this.myChart.setOption(this.option);
        }else{
          var chartDom = document.getElementById('mainc');
          this.myChart = echarts.init(chartDom);
          this.myChart.setOption(this.option);
        }
      },


      //选中测点 生成折线图
      handleSelectionChange:function(val){
        let data = []
        val.forEach((item)=>{
          let obj = {
            "ip": item.ip,
            "tongDao": item.tongDao,
            "time": item.time,
            "tdLx": item.tdLx,
            "treeName": item.treeName
          }
          data.push(obj)
        })
        let arr = []
        postanalysis(data).then(response => {
          response.data.forEach(item=>{
            arr = [...arr,...item.points]
          })
          this.zhexiantushuju = arr
          this.testarr2 = arr
          // this.shengchengtu()
        })
      },
      // 当节点展开
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      // 当节点折叠
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },

      //点击测点获取日志
      handleNodeClick(data) {
        if(data.type == 21 || data.type == 22 || data.type == 23){
          getanalysis(data.value).then(response => {
            this.tableData = response.data
          })
        }
      },

      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
      getlist:function(){
        gettreecedian().then(response => {
          this.data = response.data
        })
      }
		}
	}
</script>


<style scoped lang="less">

  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }

</style>
